<script setup lang="ts">
import { useChannelStore } from '@/store/channel'
import axios from 'axios'
import { onMounted, ref } from 'vue'

interface ChannelItem {
  id:number
  name:string
}
interface ChannelResData{
  data:{
    channels:ChannelItem[]
  }
  message:string
}
const store=useChannelStore()
const list=ref<ChannelItem[]>([])
onMounted(async()=>{
  const res= await axios.get<ChannelResData>('http://geek.itheima.net/v1_0/channels')
  list.value=res.data.data.channels
})
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        class="item"
        :class="{ active: item.id===store.selected }"
        href="javascript:;"
        v-for="(item) in list"
        :key="item.id"
        @click="store.onSelected(item.id)"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>